<template>
	<view class="list">
		<view class="item" v-for="(article,index) in articleList" :key="index" @click="goDetail(article._id)">
			<view class="title">{{article.title}}</view>
			<view v-if="article.imageSrc.length>0">
				<view class="img" v-if="article.imageSrc.length==1">
					<image :src="article.imageSrc[0]" mode="aspectFill"></image>
				</view>
				<view class="imgs" v-else>
					<image v-for="(imgurl,index) in article.imageSrc" :src="imgurl" :key="imgurl" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="info">
				<text class="author">{{article.author}}</text>
				<text class="pinglun">{{article.comment}}评论</text>
				<text class="date">{{formatDate(article.time)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import formatDate from '@/utils/formatDate.js'
	import {
		getCurrentInstance,
		onMounted,
		onUpdated,
		reactive,
		toRefs
	} from 'vue';
	export default {
		props: ["list"],
		setup(props) {

			//获取当前实例
			const {
				proxy
			} = getCurrentInstance();

			const state = reactive({
				articleList: []
			})
			onMounted(function() {
				state.articleList = props.list;
			})
			onUpdated(function() {
				state.articleList = props.list;
			})

			//跳转详情页
			const goDetail = (id) => {

				//获取main.js中封装的全局函数
				let token = proxy.$checkLogin();

				if (token) {
					uni.navigateTo({
						url: "/pages/detail/detail?id=" + id
					})
				}
			}

			return {
				...toRefs(state),
				formatDate,
				goDetail
			}

		}
	}
</script>

<style scoped lang="scss">
	.list {
		width: 100%;
		margin-bottom: 100rpx;

		.item {
			margin-top: 30rpx;

			view {
				margin: 20rpx 10rpx;
			}

			.title {
				font-size: $uni-font-size-title;
			}

			.img {
				width: 100%;
				height: 500rpx;
				overflow: hidden;


				image {
					width: 100%;
				}
			}

			.imgs {
				display: flex;

				image {
					flex: 1;
					padding: 8rpx;
				}
			}


			.info {
				font-size: $uni-font-size-sm;
				color: #999;

				text {
					margin-right: 20rpx;
				}

			}
		}
	}
</style>
